import * as React from 'react';
import { Card } from 'antd';
import { speed } from '../../hook/common';
import { getSpeedConfig } from './process-echars-config';
import './index.less';
import Chart from '../chart';

const {
    useMemo
} = React;

interface SpeedTableProps {
    statics: speed[],
    timeGranularity: string,
    speedLoading: boolean
}

export default function SpeedTable(props: SpeedTableProps) {
    const { statics, timeGranularity, speedLoading } = props;
    const option = getSpeedConfig(statics, timeGranularity);
    return (<Card
        bordered={false}
        hoverable
        loading={speedLoading}
        style={{
            marginTop: 10,
            minHeight: 448
        }}
    >
        <div className="chart-backgounrd">
            {useMemo(() => <Chart option={option} styleName={'index-chart'}></Chart>, [statics, timeGranularity])}
        </div>
    </Card>
    );
}
